<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-search
				class="last-input-box"
				:placeholder="this.$i18n('selectPeople.input',this.$i18n('org.level.label'))"
				v-model.trim="searchValue"
				@search="searchHandle"
			/>
		</div>
		<div class="content-wrapper" v-if="!canSelectMember">
			<scroll-list
				panel="Level"
				command="levelList"
				:showCheckbox="selectType.includes('Level')"
				ref="levelList"
				:initSearchValue="levelSearchCondition"
				:singleAndMult="false"
				:checkAllShow="false"
				iconType="cap-icon-alternative-post"
				@toCheckValueClickProp="getTeamValueClickPropHandle"
			/>
		</div>

		<top-bottom-layout v-else
			class="content-wrapper"
			:is-show-down="isHideDown">
			<template #top>
				<scroll-list
					panel="Level"
					command="levelList"
					:showCheckbox="selectType.includes('Level')"
					ref="levelList"
					:initSearchValue="levelSearchCondition"
					:singleAndMult="true"
					:checkAllShow="false"
					iconType="cap-icon-alternative-post"
					@toCheckValueClickProp="getTeamValueClickPropHandle"
				/>
			</template>
			<template #middle></template>
			<template #bottom>
				<scroll-list
					panel="Level"
					command="memberList"
					ref="memberList"
					:otherProps="peopleOtherProps"
					:firstLoadSearch="peopleFirstLoad"
				/>
			</template>
		</top-bottom-layout>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';
import topBottomLayout from '@/components/topBottomLayout';
import { EntityTypes, GroupId } from '@/utils/orgConstants';

export default {
	name: 'Level',
	components: { scrollList, topBottomLayout },
	inject: ['app'],
	data() {
		return {
			isHideDown: true,
			selectType: [],
			searchValue: '',
			selectAccountId: '',
			levelId: '',
			peopleFirstLoad: false,
			levelSearchCondition: {},
			// peopleOtherProps: ['deptName'],
			accountSelectorShow: true
		};
	},
	computed: {
		orgSelect() {
			return this.app().orgSelect;
		},
		canSelectMember() {
			return this.selectType.includes(EntityTypes.Member) && this.selectAccountId !== GroupId;
		},
		peopleOtherProps() {
			return this.onSetOtherProps(['deptName']);
		}
	},
	beforeMount() {
		const { selectType } = this.orgSelect;
		this.selectType = selectType;
		let accountId = this.app().switchAfterUnit.id;
		this.selectAccountId = accountId;
		this.levelSearchCondition = {
			accountId
		};
	},
	mounted() {
		if (this.orgSelect.selectType.includes(EntityTypes.Member)) {
			// 进入岗位页签时，如果可选择人员，则显示左下区域
			this.isHideDown = false;
		}
	},
	methods: {
		onChangeAccount(ret) {
			this.searchValue = '';
			this.levelId = '';
			this.peopleFirstLoad = false;
			if (this.$refs.memberList) {
				this.$refs.memberList.initProps(); // 人员清空
			}
			this.selectAccountId = ret.id;
			this.levelSearchCondition.accountId = ret.id;
			this.searchHandle();
		},
		searchHandle() {
			if (this.$refs.memberList) {
				this.$refs.memberList.initProps(); // 人员清空
			}
			this.$refs.levelList.search({
				accountId: this.selectAccountId,
				keyword: this.searchValue
			});
		},
		getTeamValueClickPropHandle(value) {
			this.isHideDown = false;
			this.levelId = value.id;
			this.peopleSearchHandle();
		},
		peopleSearchHandle() {
			let { accessFileSecretLevel } = this.orgSelect;
			this.peopleFirstLoad = true;
			if (this.$refs.memberList) {
				this.$refs.memberList.search({
					levelId: this.levelId,
					accessFileSecretLevel
				});
			}
		},
		/**
		 * 人员【密级】展示处理
		 * @param {Array} list 默认展示的人员信息
		*/
		onSetOtherProps(list) {
			if (this.orgSelect.showSecretLevel) {
				list.unshift('secretLevel')
			}
			return list
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
